<template>
  <view>
    <view class="address-box">
      <button v-if="JSON.stringify(address) == '{}'" type="primary" size="mini" class="addressBUtton" @click="chooseAddress">请选择收货地址+</button>
      <view v-else class="address-text" @click="chooseAddress">
        <!-- 收货人信息 -->
        <view class="user-info">
          <view class="userName">
            收货人:{{ address.userName }}
          </view>
          <view class="phone">
            <text>电话：{{ address.telNumber }}</text>
            <uni-icons class="phoneIcon" type="forward" size="18"></uni-icons>
          </view>
        </view>
        <!-- 地址信息 -->
        <view class="user-address">
          收货地址：{{ shippingAddress }}
        </view>
      </view>
    </view>
    <!-- 底边线 -->
    <image class="boder-bottom" src="../../static/cart_border@2x.png"></image>
  </view>
</template>

<script>
  import { mapMutations ,mapState,mapGetters} from 'vuex'
  export default {
    name:"my-address",
    data() {
      return {
        // address:{}
      };
    },
    methods:{
      ...mapMutations('user',['UPDATEADDRESS']),
     async chooseAddress() {
       const [err,succ] = await uni.chooseAddress().catch(err => err)
       if(err === null && succ.errMsg === 'chooseAddress:ok') {
       // this.address = succ
       this.UPDATEADDRESS(succ)
       console.log(err);

       }
      }
    },
    computed:{
      ...mapState('user',['address']),
      ...mapGetters(['shippingAddress'])
    }
  }
</script>

<style lang="scss">
  .boder-bottom {
    display: block;
    width: 100%;
    height: 5px;
  }
  .address-box {
    display: flex;
    height: 90px;
    justify-content: center;
    align-items: center;
    .address-text {
        width: 100%;
        padding: 20rpx;
      .user-info {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 25rpx;
      }
      .phoneIcon {
        vertical-align: middle;
        margin-left: 5rpx;
      } 
      .user-address  {
        font-size: 14px;
      }
    }
  }
  .addressBUtton {
    
  }
</style>